<template>
	<view class="container u-flex u-col-center u-row-between">
		<view class="order-top u-flex u-col-center u-row-between">
			<view class="item" :class="{on:navindex == index}" v-for="(item,index) in navList" :key="index"
				@click="changeNav(index)">
				{{item}}
			</view>
		</view>
		<view class="order-bottom">
			<swiper class="swiper" :current="navindex" @change="swiperChange">
				<swiper-item>
					<view class="item">
						<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="getMore">
							<view class="order" v-for="(item,index) in list1" :key="index"
								@click="$pageTo('/pages/index/order?id=' + item.id)">
								<view class="order-title u-flex u-col-center u-row-between">
									<view class="t">
										编号：{{item.order_no}}
									</view>
									<!-- 1=待审核,2=待寄出,3=待验货,4=待打款,5=已完成,6=已关闭,7=已归档 -->
									<view class="state">
										{{ss2[item.status]}}
									</view>
								</view>
								<view class="goods">
									<view class="i u-flex u-col-top u-row-between"
										v-for="(item2,index2) in item.products" :key="index2">
										<view class="img">
											<image :src="http + item2.image" mode="aspectFill"></image>
										</view>
										<view class="con">
											<view class="title u-line-1">
												{{item2.title}}
											</view>
											<view class="tips">
												<text v-for="(item3,index3) in item2.spec.split(',')">{{item3}}</text>
												<text v-for="(item4,index4) in item2.mountings_texts" :key="index4">
												{{item4.title}}-{{item4.intro}}</text>
											</view>
										</view>
										<view class="r">
											<view class="price">
												{{item2.price  - item2.mountings_price}}元
											</view>
											<view class="num">
												×{{item2.num}}
											</view>
										</view>
									</view>
								</view>
								<view class="total">
									合计：{{ item.total_price}}元 <text>丨</text> 实付：{{ item.pay_price}}元
								</view>
								<view class="info mt20" v-if="item.status == 1">
									请耐心等待审核，未审核通过前不要寄卡
								</view>
								<view class="info mt20" v-if="item.status == 2">
									请在24小时内寄出货物并填写快递单号，超时系统自动关闭回收订单
								</view>
								<view class="info mt20" v-if="item.status == 6 && item.fail_reason">
									拒绝原因:{{item.fail_reason}}
								</view>
								<view class="btns u-flex u-col-center u-row-right"
									v-if="item.status == 1 || item.status == 2">
									<view class="btn1 btn" @click.stop="closeOrder(item.id,index)"
										v-if="item.status == 1 || item.status == 2">
										关闭订单
									</view>
									<view class="btn2 btn" v-if="item.status == 2"
										@click.stop="$pageTo('/pages/index/express?id=' + item.id)">
										发货
									</view>
								</view>
							</view>
							<view class="nolist" v-if="nolist1">
								<u-empty mode="order" iconSize="60" text="暂无订单"></u-empty>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="item">
						<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="getMore">
							<view class="order" v-for="(item,index) in list2" :key="index"
								@click="$pageTo('/pages/index/order?id=' + item.id)">
								<view class="order-title u-flex u-col-center u-row-between">
									<view class="t">
										编号：{{item.order_no}}
									</view>
									<!-- 1=待审核,2=待寄出,3=待验货,4=待打款,5=已完成,6=已关闭,7=已归档 -->
									<view class="state">
										{{ss2[item.status]}}
									</view>
								</view>
								<view class="goods">
									<view class="i u-flex u-col-top u-row-between"
										v-for="(item2,index2) in item.products" :key="index2">
										<view class="img">
											<image :src="http + item2.image" mode="aspectFill"></image>
										</view>
										<view class="con">
											<view class="title u-line-1">
												{{item2.title}}
											</view>
											<view class="tips">
												<text v-for="(item3,index3) in item2.spec.split(',')">{{item3}}</text>
												<text v-for="(item4,index4) in item2.mountings_texts" :key="index4">
												{{item4.title}}-{{item4.intro}}</text>
											</view>
										</view>
										<view class="r">
											<view class="price">
												{{item2.price}}元
											</view>
											<view class="num">
												×{{item2.num}}
											</view>
										</view>
									</view>
								</view>
								<view class="total">
									合计：{{ item.total_price}}元 <text>丨</text> 实付：{{ item.pay_price}}元
								</view>
								<view class="info mt20" v-if="item.status == 1">
									请耐心等待审核，未审核通过前不要寄卡
								</view>
								<view class="info mt20" v-if="item.status == 2">
									请在24小时内寄出货物并填写快递单号，超时系统自动关闭回收订单
								</view>
								<view class="info mt20" v-if="item.status == 6 && item.fail_reason">
									拒绝原因:{{item.fail_reason}}
								</view>

								<view class="btns u-flex u-col-center u-row-right"
									v-if="item.status == 1 || item.status == 2">
									<view class="btn1 btn" @click.stop="closeOrder(item.id,index)"
										v-if="item.status == 1 || item.status == 2">
										关闭订单
									</view>
									<view class="btn2 btn" v-if="item.status == 2"
										@click.stop="$pageTo('/pages/index/express?id=' + item.id)">
										发货
									</view>
								</view>
							</view>
							<view class="nolist" v-if="nolist2">
								<u-empty mode="order" iconSize="60" text="暂无订单"></u-empty>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="item">
						<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="getMore">
							<view class="order" v-for="(item,index) in list3" :key="index"
								@click="$pageTo('/pages/index/order?id=' + item.id)">
								<view class="order-title u-flex u-col-center u-row-between">
									<view class="t">
										编号：{{item.order_no}}
									</view>
									<!-- 1=待审核,2=待寄出,3=待验货,4=待打款,5=已完成,6=已关闭,7=已归档 -->
									<view class="state">
										{{ss2[item.status]}}
									</view>
								</view>
								<view class="goods">
									<view class="i u-flex u-col-top u-row-between"
										v-for="(item2,index2) in item.products" :key="index2">
										<view class="img">
											<image :src="http + item2.image" mode="aspectFill"></image>
										</view>
										<view class="con">
											<view class="title u-line-1">
												{{item2.title}}
											</view>
											<view class="tips">
												<text v-for="(item3,index3) in item2.spec.split(',')">{{item3}}</text>
												<text v-for="(item4,index4) in item2.mountings_texts" :key="index4">
												{{item4.title}}-{{item4.intro}}</text>
											</view>
										</view>
										<view class="r">
											<view class="price">
												{{item2.price}}元
											</view>
											<view class="num">
												×{{item2.num}}
											</view>
										</view>
									</view>
								</view>
								<view class="total">
									合计：{{ item.total_price}}元 <text>丨</text> 实付：{{ item.pay_price}}元
								</view>
								<view class="info mt20" v-if="item.status == 1">
									请耐心等待审核，未审核通过前不要寄卡
								</view>
								<view class="info mt20" v-if="item.status == 2">
									请在24小时内寄出货物并填写快递单号，超时系统自动关闭回收订单
								</view>
								<view class="info mt20" v-if="item.status == 6 && item.fail_reason">
									拒绝原因:{{item.fail_reason}}
								</view>
								<view class="btns u-flex u-col-center u-row-right"
									v-if="item.status == 1 || item.status == 2">
									<view class="btn1 btn" @click.stop="closeOrder(item.id,index)"
										v-if="item.status == 1 || item.status == 2">
										关闭订单
									</view>
									<view class="btn2 btn" v-if="item.status == 2"
										@click.stop="$pageTo('/pages/index/express?id=' + item.id)">
										发货
									</view>
								</view>
							</view>
							<view class="nolist" v-if="nolist3">
								<u-empty mode="order" iconSize="60" text="暂无订单"></u-empty>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="item">
						<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="getMore">
							<view class="order" v-for="(item,index) in list4" :key="index"
								@click="$pageTo('/pages/index/order?id=' + item.id)">
								<view class="order-title u-flex u-col-center u-row-between">
									<view class="t">
										编号：{{item.order_no}}
									</view>
									<!-- 1=待审核,2=待寄出,3=待验货,4=待打款,5=已完成,6=已关闭,7=已归档 -->
									<view class="state">
										{{ss2[item.status]}}
									</view>
								</view>
								<view class="goods">
									<view class="i u-flex u-col-top u-row-between"
										v-for="(item2,index2) in item.products" :key="index2">
										<view class="img">
											<image :src="http + item2.image" mode="aspectFill"></image>
										</view>
										<view class="con">
											<view class="title u-line-1">
												{{item2.title}}
											</view>
											<view class="tips">
												<text v-for="(item3,index3) in item2.spec.split(',')">{{item3}}</text>
												<text v-for="(item4,index4) in item2.mountings_texts" :key="index4">
												{{item4.title}}-{{item4.intro}}</text>
											</view>
										</view>
										<view class="r">
											<view class="price">
												{{item2.price}}元
											</view>
											<view class="num">
												×{{item2.num}}
											</view>
										</view>
									</view>
								</view>
								<view class="total">
									合计：{{ item.total_price}}元 <text>丨</text> 实付：{{ item.pay_price}}元
								</view>
								<view class="info mt20" v-if="item.status == 1">
									请耐心等待审核，未审核通过前不要寄卡
								</view>
								<view class="info mt20" v-if="item.status == 2">
									请在24小时内寄出货物并填写快递单号，超时系统自动关闭回收订单
								</view>
								<view class="info mt20" v-if="item.status == 6 && item.fail_reason">
									拒绝原因:{{item.fail_reason}}
								</view>
								<view class="btns u-flex u-col-center u-row-right"
									v-if="item.status == 1 || item.status == 2">
									<view class="btn1 btn" @click.stop="closeOrder(item.id,index)"
										v-if="item.status == 1 || item.status == 2">
										关闭订单
									</view>
									<view class="btn2 btn" v-if="item.status == 2"
										@click.stop="$pageTo('/pages/index/express?id=' + item.id)">
										发货
									</view>
								</view>
							</view>
							<view class="nolist" v-if="nolist4">
								<u-empty mode="order" iconSize="60" text="暂无订单"></u-empty>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="item">
						<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="getMore">
							<view class="order" v-for="(item,index) in list5" :key="index"
								@click="$pageTo('/pages/index/order?id=' + item.id)">
								<view class="order-title u-flex u-col-center u-row-between">
									<view class="t">
										编号：{{item.order_no}}
									</view>
									<!-- 1=待审核,2=待寄出,3=待验货,4=待打款,5=已完成,6=已关闭,7=已归档 -->
									<view class="state">
										{{ss2[item.status]}}
									</view>
								</view>
								<view class="goods">
									<view class="i u-flex u-col-top u-row-between"
										v-for="(item2,index2) in item.products" :key="index2">
										<view class="img">
											<image :src="http + item2.image" mode="aspectFill"></image>
										</view>
										<view class="con">
											<view class="title u-line-1">
												{{item2.title}}
											</view>
											<view class="tips">
												<text v-for="(item3,index3) in item2.spec.split(',')">{{item3}}</text>
												<text v-for="(item4,index4) in item2.mountings_texts" :key="index4">
												{{item4.title}}-{{item4.intro}}</text>
											</view>
										</view>
										<view class="r">
											<view class="price">
												{{item2.price}}元
											</view>
											<view class="num">
												×{{item2.num}}
											</view>
										</view>
									</view>
								</view>
								<view class="total">
									合计：{{ item.total_price}}元 <text>丨</text> 实付：{{ item.pay_price}}元
								</view>
								<view class="info mt20" v-if="item.status == 1">
									请耐心等待审核，未审核通过前不要寄卡
								</view>
								<view class="info mt20" v-if="item.status == 2">
									请在24小时内寄出货物并填写快递单号，超时系统自动关闭回收订单
								</view>
								<view class="info mt20" v-if="item.status == 6 && item.fail_reason">
									拒绝原因:{{item.fail_reason}}
								</view>
								<view class="btns u-flex u-col-center u-row-right"
									v-if="item.status == 1 || item.status == 2">
									<view class="btn1 btn" @click.stop="closeOrder(item.id,index)"
										v-if="item.status == 1 || item.status == 2">
										关闭订单
									</view>
									<view class="btn2 btn" v-if="item.status == 2"
										@click.stop="$pageTo('/pages/index/express?id=' + item.id)">
										发货
									</view>
								</view>
							</view>
							<view class="nolist" v-if="nolist5">
								<u-empty mode="order" iconSize="60" text="暂无订单"></u-empty>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: ['全部', '交易中', '已完成', '已关闭', '已归档'],
				ss2: ['', '待审核', '待寄出', '待验货', '待打款', '已完成', '已关闭', '已归档'], //1=待审核,2=待寄出,3=待验货,4=待打款,5=已完成,6=已关闭,7=已归档
				navindex: 0,
				ss: ['', 1, 5, 6, 7],
				list1: [],
				page1: 1,
				total1: 0,
				nolist1: false,
				list2: [],
				page2: 1,
				total2: 0,
				nolist2: false,
				list3: [],
				page3: 1,
				total3: 0,
				nolist3: false,
				list4: [],
				page4: 1,
				total4: 0,
				nolist4: false,
				list5: [],
				page5: 1,
				total5: 0,
				nolist5: false,
				http: this.$imgUrl,

			}
		},
		onLoad() {
			my.setNavigationBar({
				frontColor: '#000',
				backgroundColor: '#fff',
			})
			if (!uni.getStorageSync('token')) {
				uni.switchTab({
					url: '/pages/index/index'
				})
				return
			}

		},
		onShow() {
			this.page1 = 1
			this.page2 = 1
			this.page3 = 1
			this.page4 = 1
			this.page5 = 1
			this.list1 = []
			this.list2 = []
			this.list3 = []
			this.list4 = []
			this.list5 = []
			this.getList()
		},
		methods: {
			closeOrder(id, index) {
				uni.showModal({
					title: '温馨提示',
					content: '你要关闭订单吗?',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$http.post('/api/order/close_order', {
								id: id
							}).then(res => {
								if (res.code == 1) {
									if (this.navindex == 0) {
										this.$set(this.list1[index], 'status', 6)
									}
									if (this.navindex == 1) {
										this.list2.splice(index, 1)
									}
									uni.showToast({
										title: '关闭成功',
										icon: "none"
									});

								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			getMore() {
				if (this.navindex == 0 && this.page1 < this.total1) {
					this.page1++
					this.getList()
				}
				if (this.navindex == 1 && this.page2 < this.total2) {
					this.page2++
					this.getList()
				}
				if (this.navindex == 2 && this.page3 < this.total3) {
					this.page3++
					this.getList()
				}
				if (this.navindex == 3 && this.page4 < this.total4) {
					this.page4++
					this.getList()
				}
				if (this.navindex == 4 && this.page5 < this.total5) {
					this.page5++
					this.getList()
				}
			},
			getList() {
				let pages = [this.page1, this.page2, this.page3, this.page4, this.page5]
				console.log(this.ss[this.navindex], 222222, this.navindex)
				this.$http.post('/api/order/list', {
					page: pages[this.navindex],
					limit: 10,
					status: this.ss[this.navindex],
				}).then(res => {
					if (res.code == 1) {
						if (this.navindex == 0) {
							this.list1 = [...this.list1, ...res.data.list]
							this.total1 = res.data.total_page
							this.nolist1 = this.list1.length == 0
						} else if (this.navindex == 1) {
							this.list2 = [...this.list2, ...res.data.list]
							this.total2 = res.data.total_page
							this.nolist2 = this.list2.length == 0
						} else if (this.navindex == 2) {
							this.list3 = [...this.list3, ...res.data.list]
							this.total3 = res.data.total_page
							this.nolist3 = this.list3.length == 0
						} else if (this.navindex == 3) {
							this.list4 = [...this.list4, ...res.data.list]
							this.total4 = res.data.total_page
							this.nolist4 = this.list4.length == 0
						} else {
							this.list5 = [...this.list5, ...res.data.list]
							this.total5 = res.data.total_page
							this.nolist5 = this.list5.length == 0
						}

					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				});
			},
			changeNav(index) {
				if (this.navindex != index) {
					this.navindex = index
					this.swiperChange({
						detail: {
							current: index
						}
					})
				}
			},
			swiperChange(e) {
				console.log(e, e.detail.current)
				let index = e.detail.current
				this.navindex = index

				if (index == 0) {
					this.page1 = 1
					this.list1 = []
					this.getList()
				}
				if (index == 1) {
					this.page2 = 1
					this.list2 = []
					this.getList()
				}
				if (index == 2) {
					this.page3 = 1
					this.list3 = []
					this.getList()
				}
				if (index == 3) {
					this.page4 = 1
					this.list4 = []
					this.getList()
				}
				if (index == 4) {
					this.page5 = 1
					this.list5 = []
					this.getList()
				}

			},
		}
	}
</script>

<style lang="less" scoped>
	@color: #E31D21;

	.container {
		width: 100vw;
		height: 100vh;
		flex-direction: column;

		.order-top {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: #fff;

			.item {
				flex: 1;
				text-align: center;
				font-size: 28rpx;
				color: #333;

			}

			.on {
				position: relative;
				color: @color;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					width: 40rpx;
					height: 6rpx;
					background-color: @color;
					border-radius: 3rpx;
					margin-left: -20rpx;
				}
			}
		}

		.order-bottom {
			flex: 1;
			height: 1rpx;
			width: 100%;

			.swiper {
				width: 100%;
				height: 100%;

				.item {
					width: 100%;
					height: 100%;

					.scroll-Y {
						width: 100%;
						height: 100%;
						padding: 30rpx;
						box-sizing: border-box;

						.order {
							background-color: #fff;
							padding: 20rpx;
							border-radius: 10rpx;
							margin-bottom: 30rpx;

							.info {
								background-color: #FBEEDF;
								padding: 10rpx;
								font-size: 24rpx;
								color: @color;
								line-height: 30rpx;
								border-radius: 6rpx;
							}

							.btns {
								margin-top: 20rpx;
								border-top: 2rpx solid #eee;
								padding-top: 20rpx;

								.btn {
									width: 180rpx;
									height: 60rpx;
									line-height: 60rpx;
									text-align: center;
									font-size: 24rpx;
									border-radius: 30rpx;
									box-sizing: border-box;
								}

								.btn1 {
									border: 2rpx solid #eee;
									color: #666;
								}

								.btn2 {
									margin-left: 30rpx;
									background-color: @color;
									color: #fff;
								}
							}

							.total {
								text-align: right;
								font-size: 30rpx;
								font-weight: 600;
								height: 60rpx;
								line-height: 60rpx;
								color: #333;

								text {
									color: #eee;
									padding: 0 10rpx;
									font-weight: 400;
								}
							}

							.order-title {
								height: 60rpx;
								line-height: 60rpx;

								.t {
									font-size: 26rpx;
									color: #333;
								}

								.state {
									font-size: 24rpx;
									color: #999;
								}
							}

							.goods {
								.i {
									padding: 10rpx 0;

									.img {
										width: 75rpx;
										height: 121rpx;
										border-radius: 10rpx;
										overflow: hidden;

										image {
											width: 100%;
											height: 100%;
										}
									}

									.con {
										flex: 1;
										padding: 0 20rpx;
										width: 1rpx;

										.title {
											font-size: 28rpx;
											color: #333;
										}

										.tips {

											text {
												color: #999;
												font-size: 24rpx;
												margin: 10rpx 10rpx 0 0;
											}
										}
									}

									.r {
										text-align: right;

										.price {
											font-size: 24rpx;
											color: #666;
											height: 60rpx;
											line-height: 60rpx;
										}

										.num {
											font-size: 24rpx;
											color: #666;
										}
									}
								}
							}

							.total {}

							.btns {
								.btn {}

								.btn1 {}

								.btn2 {}
							}

						}

					}
				}
			}
		}
	}
</style>